<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13 - 获取.操作.设置标签(元素)</title>
    <style>
        .inline_style {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div>123</div>
    </div>

    <input type="text" value="我是表单中的内容" name="" id="">
    
    <div class="box2"></div>
    <div class="box3"></div>

    <input type="text" value="" name="" id="" class="int">

    <img src="" alt="">

    <div class="inline_style">标签行内式</div>

    <p>给标签设置类样式</p>

    <script>

        // A. 获取标签(元素)       通过 js 操作网页,首先要获取网页中对应的标签(元素)
        // 语法:
        // ☛   document.querySelector('css选择器');          (获取一个标签)      返回值就是一个对象
        // ☛   document.querySelectorAll('css选择器');       (获取全部对应标签)  返回的结果是一个数组
        
        // 代码演示:
        // 问题:  通过js获取页面中的 div 标签
        let a = document.querySelector('.box1');
        // console.log(a);






        // B. 操作标签中的内容

        // 1. 获取标签中的内容      获取非表单元素中的内容 (div, p, span, a, li, ....)
        // 语法:   
        // ☛   标签对象.innerHTML      标签中文字包含到了其他的标签中, 获取内容(文字)和外面的标签
        // ☛   标签对象.innerText      只能获取内容(文字)

        // 代码演示:
        console.log(a.innerHTML);       // <div>123</div>
        console.log(a.innerText);       // 123



        // 2. 获取表单元素中的内容  (input)
        // 语法:    
        // ☛   标签对象.value

        // 代码演示:
        // 问题:  获取 input 标签中的内容
        let b = document.querySelector('input');
        console.log(b.value);       // 我是表单中的内容



        // 3. 给标签设置文字内容
        // a)  非表单元素设置文字内容
        // 语法:  
        // ☛   标签对象.innerHTML = 值;
        // ☛   标签对象.innerText = 值;
        // 代码演示:
        let div1 = document.querySelector('.box2');
        let div2 = document.querySelector('.box3');
        div1.innerHTML = '<h1>我是div标签中的文字</h1>';            // 我是div标签中的文字
        div2.innerText = '<h2>我是div标签中的文字123123</h2>';      // <h2>我是div标签中的文字123123</h2>
        
        // b)  表单元素设置文字内容
        // 语法: 
        // ☛   标签对象.value = 值;
        // 代码演示:
        let int = document.querySelector('.int');
        int.value = '我是表单元素中的文字';






        // C. 通过 js 操作图片标签      操作图片标签的路径

        // 1. 通过 js 代码获取图片路径
        // 语法: 
        // ☛                                  标签对象.src;
        // 2. 通过js代码给图片标签设置路径
        // 语法: 
        // ☛                                  标签对象.src = '图片路径';

        // 代码演示:
        // 获取图片标签的路径
        let img = document.querySelector('img');
        // console.log(img.src);
        // 给图片标签设置src路径
        // myimg.src = './';






        // D. 给标签设置样式        行内样式    类样式

        // 1. 标签行内样式
        // 语法: 
        // ☛   标签对象.style.css属性 = '样式值';

        // 代码演示:
        let inline = document.querySelector('.inline_style');
        inline.style.width = '200px';
        inline.style.height = '200px';
        inline.style.border = '5px solid blue';
        inline.style.fontSize = '50px';
        inline.style.backgroundColor = 'skyblue';



        // 2. 标签类样式
        // 语法:
        // ☛   标签对象.className = '类名'

        // 代码演示:
        let p = document.querySelector('p');
        p.className = 'ppp ppp1 ppp2';






        // E. 其他方式获取标签

        // 1. 通过标签的 id 名 获取元素
        // 语法:
        // ☛   document.getElementById('标签的id名');

        // 2. 通过标签的名字获取
        // 语法:
        // ☛   document.getElementsByTagName('标签名');

        // 3. 通过类名获取 
        // 语法:
        // ☛   document.getElementsByClassName('类名');


    </script>
</body>
</html>